<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #fu {
      width: 400px;
      height: 400px;
      background: blue;
    }

    #zi {
      width: 200px;
      height: 200px;
      background: chartreuse;
    }
  </style>
</head>

<body>
  <div id="fu">
    <div id="zi"> </div>
  </div>
  <script>
    // DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
    // 事件捕获（event capturing）： 当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。
    // 事件冒泡（dubbed bubbling）： 事件源 =>根节点（由内到外）进行事件传播。
    // 子元素和父辈绑定了相同的事件  考虑事件 冒泡 是否要阻止事件冒泡
    var fu = document.getElementById("fu");
    fu.onclick = function () {
      alert("点击了父元素")
    }
    var zi = document.getElementById("zi");
    zi.onclick = function (e) {
      // 阻止冒泡的方法
      var e = e || window.event;
      // if (e.stopPropagation) {
      //   e.stopPropagation(); //谷歌的阻止冒泡
      // } else {
      //   e.cancelbubble = true;//ie 阻止冒泡
      // }
      // 阻止冒泡的三目写法
      e.stopPropagation ? e.stopPropagation() : e.cancelbubble = true;
      alert("点击了子元素")
    }



  </script>
</body>

</html>